/**
 * Created by zzy on 2017/8/30.
 */
import React, {Component} from 'react';
import {
    Text,
    View,
    TouchableOpacity,
    Image,
    StyleSheet,
    ScrollView,
    Dimensions,
    PixelRatio,
    DeviceEventEmitter
} from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons'
import NetRequest from '../util/NetRequest'
import {Option} from '../home/ShoppingCart'
import Contant from "../Contant";

export default class TiketsViable extends Component{
    static navigationOptions = {
        title: '水票抵用'
    };
    constructor(props){
        super(props);
        this.orderTicketInfo=this.props.navigation.state.params.orderTicketInfo;
        // this.orderTicketInfo=[{"name": "农夫山泉1升桶装水",
        //     "ticketId": 1,
        //     "productItemId": 91,
        //     "totalCount": 3,
        //     "canUseCount": 2,
        //     "selectUseCount": 2}];
        this.shopId=this.props.navigation.state.params.shopId;
    }
    render(){
        return <ScrollView style={{flex:1,paddingTop:20,backgroundColor:Contant.GRAYBGCOLOR}}>

            {
                this.orderTicketInfo.userTicketModels.map((tiket,index)=>{
                    return <TiketCell
                        key={index}
                        tiket={tiket}
                        click={this._tiketAcyion.bind(this)}
                    />
                })
            }
        </ScrollView>
    }
    _tiketAcyion(tiket,actionType){
        var param={
            productItemId: tiket.productItemId,
            shopId: this.shopId,
            ticketId: tiket.ticketId
        };
         NetRequest.confirmOrderTiketAcyion(param,actionType).then((data)=>{
             LOG('水票操作--------'+JSON.stringify(data))
         });
    }

    componentWillUnmount(){
        DeviceEventEmitter.emit('refreshOrderInfo');
    }
}

class TiketCell extends Component{
    constructor(props){
        super(props);
        this.state={
            selectUseCount:this.props.tiket.selectUseCount
        }
    }
    render(){
        let {tiket,click}=this.props;
        let textColor='#F64F36';
        return <TouchableOpacity style={{flexDirection:'row',alignItems:'center',justifyContent:'center',margin:5}}
                                 activeOpacity={1}
                                 onPress={()=>{

                                 }}
        >
            <Image style={{width:88,height:90,alignItems:'center',justifyContent:'center',backgroundColor:'#00000000'}} source={require('../../asserts/ticket/shuipiao_bg_left.png')}>
                <Text style={{color:'#F64F36',fontSize:23}}>{tiket.totalCount}
                    <Text style={{fontSize:15}}>张</Text>
                </Text>
                <Text style={{color:textColor,fontSize:13}}>平台通用</Text>
            </Image>
            <Image style={{width:247,height:90,flexDirection:'row',alignItems:'center'}} source={require('../../asserts/ticket/shuipiao_bg_right.png')}>
                <View style={{marginLeft:10,flex:1,backgroundColor:'#00000000'}}>
                    <Text style={{color:'black',fontSize:15}}>{tiket.name}</Text>
                    <Text style={{marginTop:3,color:textColor,marginTop:6,fontSize:13}}>{tiket.brandName}</Text>
                </View>
                <Option
                    selectCount={this.state.selectUseCount}
                    minus={()=>{
                        click(tiket,'decrease');
                        if(this.state.selectUseCount>0){
                            this.setState({
                                selectUseCount:this.state.selectUseCount-1
                            })
                        }
                    }}
                    plus={()=>{
                        if(this.state.selectUseCount<tiket.canUseCount){
                            click(tiket,'increase');
                            this.setState({
                                selectUseCount:this.state.selectUseCount+1
                            })
                        }
                    }}
                />
            </Image>

        </TouchableOpacity>
    }

}